<template>
  <div>
    <header :class="deepBg">

      <img src="../../assets/logo.png" alt="logo" class="header-logo">
      <ul class="header-operations" style="margin-right:100px">

        <li>
          <div :class="easyBg"  style="width:140px;border-radius:60px; cursor: pointer;height:60px" >
            <div style="display:inline-block;float:left">
              <img src="../../assets/tx.png" style="width:60px;height:60px;border-radius:50%;"/>
            </div>
            <div style="display:inline-block;float:left;margin-top:10px">
              <div style="width:70px;white-space:nowrap;overflow-x:hidden;text-overflow: ellipsis;">
                <span style="color:white;margin-left:10px;margin-top:10px" >{{user.trueName}}</span>
              </div>
              <div style="margin-top:5px;background:gray;line-height: 25px">
                <div style="float:left">
                  <el-dropdown  trigger="click" >
                  <span class="el-dropdown-link" style="color:white;font-size: 12px">
                &nbsp;&nbsp;&nbsp;设&nbsp;&nbsp;&nbsp;置&nbsp;
                  </span>
                    <el-dropdown-menu slot="dropdown" >
                      <router-link class='inlineBlock' to="/index">
                        <el-dropdown-item>
                          <icon name="home_black" scale="1.7"  class="headerIconClass"></icon>主页
                        </el-dropdown-item>
                      </router-link>
                      <el-dropdown-item divided><div @click="updateUserInfo" ><icon name="edit_black" scale="1.7" class="headerIconClass"></icon><span>修改信息</span></div></el-dropdown-item>
                      <el-dropdown-item divided><div @click="updateUserPassword" ><icon name="eye_black" scale="1.7"  class="headerIconClass"></icon>修改密码</div></el-dropdown-item>
                      <el-dropdown-item divided><div @click="logout" ><icon name="exit_black" scale="1.7" class="headerIconClass"></icon>安全退出</div></el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
                <div style="float:left">
<!--                  <el-dropdown  @command="changeBackground" trigger="click" >-->
<!--                  <span class="el-dropdown-link">-->
<!--                    <div style="width:20px;height:25px;">-->
<!--&lt;!&ndash;                      <icon name="changeColor" :scale="1.8" class="el-icon-arrow-down" style="color:white;"></icon>&ndash;&gt;-->
<!--                      <i class="el-icon-arrow-down el-icon-s-help" style="color:white"></i>-->
<!--                    </div>-->
<!--                      </span>-->
<!--                    <el-dropdown-menu slot="dropdown">-->
<!--                      <el-dropdown-item divided :command=1><div ><span>蓝色</span></div></el-dropdown-item>-->
<!--                      <el-dropdown-item divided :command=2><div  >黑色</div></el-dropdown-item>-->
<!--                      <el-dropdown-item divided :command=3><div  >红色</div></el-dropdown-item>-->
<!--                    </el-dropdown-menu>-->
<!--                  </el-dropdown>-->
                </div>

              </div>

            </div>

          </div>
        </li>
        <li> </li>
      </ul>
      <headerModiffyPassword ref="headerModiffyPasswordDialog"></headerModiffyPassword>
      <hearderEditUserDialog ref="hearderEditUserDialog" ></hearderEditUserDialog>
    </header>
  </div>
</template>
<script>
  import { updateSkin } from '@/view/api/userManager.js'
  import hearderEditUserDialog from '@/components/header/headerEditUserDialog.vue'
  import headerModiffyPassword from '@/components/header/headerModiffyPassword.vue'
  import { removeToken } from '@/utils/auth'
  export default {
    components: {
      'headerModiffyPassword': headerModiffyPassword,
      'hearderEditUserDialog': hearderEditUserDialog
    },
    props: {
      user: {
      }
    },
    computed: {
      deepBg: function () {
        if (this.bgItem === 1) {
          return 'deepblue'
        } else if (this.bgItem === 2) {
          return 'deepblack'
        } else {
          return 'deepred'
        }
      },
      easyBg: function () {
        if (this.bgItem === 1) {
          return 'easyblue'
        } else if (this.bgItem === 2) {
          return 'easyblack'
        } else {
          return 'easyred'
        }
      }
    },
    data () {
      return {
        bgItem: this.sessiongetJSON('user').skin
      }
    },
    methods: {
      logout () {
        let cThis = this
        this.$confirm('此操作将退出系统, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          cThis.sessionclear()
          removeToken()
          setTimeout(function () {
            cThis.$router.push({name: 'login'})
          }, 200)
//          window.location.reload()  // 为了重新实例化vue-router对象 避免bug
        }).catch(() => {
        })
      },
      updateUserInfo () {
//        let user = {
//          id: this.$store.getters.id,
//          userName: this.$store.getters.userName,
//          trueName: this.$store.getters.trueName,
//          mobile: this.$store.getters.mobile,
//          detailAddress: this.$store.getters.detailAddress,
//          qq: this.$store.getters.qq,
//          email: this.$store.getters.email,
//          wechat: this.$store.getters.wechat
//        }
        let user = this.sessiongetJSON('user')
        this.$refs.hearderEditUserDialog.createUserDialog(user)
      },
      updateUserPassword () {
        this.$refs.headerModiffyPasswordDialog.openDialog()
      },
      changeBackground (item) {
        let cThis = this
        console.log(item)
        let params = {}
        params.id = this.sessiongetJSON('user').id
        params.skin = item
        updateSkin(params,
          function (data) {
            cThis.bgItem = item
            let p = cThis.sessiongetJSON('user')
            p.skin = item
            cThis.sessionput('user', p)
            cThis.$emit('changeBackground', item)
          },
          function (error) {
            console.log(error)
          }
        )
      }
    }
  }
</script>
<style>
  .headerIconClass {
    margin-top:2px;
    margin-right:10px;
    display:block;
    float:left
  }
  header {
    background-color: #2d3a4b;
    height: 80px;
    width: 100%;
   position:fixed;
    z-index: 99;
  }
  .header-logo {
    display: inline-block;
    vertical-align: middle;
    height:60px;
    widht:60px;
    margin-left:20px;
    margin-top:10px
  }
  .header-operations {
    display: inline-block;
    float: right;
    height: 100%;
  }
  .header-operations li {
    color: #fff;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
  }
  .header-operations li:first-child{
    cursor: default
  }
  .header-opacity{
    opacity: .7;
  }
  .el-dropdown-menu__item{
    line-height:20px;
    font-size:12px;
  }
  .user-dropdown a{
    text-decoration: none;
  }
</style>
